<template>
  <div>
    <PubSearchHead />
    <el-table :data="tableData" >
     <el-table-column
     show-overflow-tooltip
        prop="id"
        label="产品ID"
        width="80">
      </el-table-column>
      <el-table-column
     show-overflow-tooltip
        prop="itemCatId"
        label="产品关联ID"
        width="100">
      </el-table-column>
      <el-table-column
     show-overflow-tooltip
        prop="paramData"
        label="规格参数"
        >
        <template slot-scope="scope">
          <ul>
            <li v-for="(item,index) in JSON.parse(scope.row.paramData)" :key="index">{{item.value}}</li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleParamsDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
  </el-table>
  <!-- 规格参数添加 -->
      <el-dialog
        title="添加规格参数"
        :visible.sync="dialogParamsVisible"
        width="60%"
        :before-close="handleClose">
        <PubTree @onTree="getTreeData" />
          <el-dialog
            width="60%"
            title="书写规格参数"
            :visible.sync="dialogParamsAddVisible"
            append-to-body>
            <!-- 视图结构 -->
            <el-button @click="addMainParamsHandle">添加规格参数主结构</el-button>
            <el-form
            :model="paramsDoMains" ref="dynamicValidateForm"
            >
              <el-form-item label="规格参数"
              v-for="(item,index) in paramsDoMains.domains" :key="index"
              >
                <el-input
                v-model="item.value"
                style="width:60%"
                >
                </el-input>
                <el-button @click="delMainParamsHandle(index)">删除规格参数主结构</el-button>
                <el-button @click="addChildParamsHandle(index)">添加规格参数子结构</el-button>
                <div v-for="(childItem,childIndex) in item.children" :key="childIndex">
                  <el-input style="width:40%;margin-left:80px" v-model="childItem.childValue"></el-input>
                  <el-button @click="delChildParamsHandle(index,childIndex)">删除规格参数子结构</el-button>
                </div>
              </el-form-item>
            </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogParamsAddVisible = false">取 消</el-button>
                <el-button type="primary" @click="finishAddParamsHandle">确认添加</el-button>
              </div>
          </el-dialog>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogParamsVisible = false">取 消</el-button>
          <el-button type="primary" @click="addParamsHandle">确定添加规格参数</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import api from "../api"
import PubSearchHead from '../components/PubSearchHead'
import PubTree from '../components/PubTree'
export default {
  data(){
    return{
      tableData:[],
      dialogParamsVisible:false,
      dialogParamsAddVisible:false,
      treeData:{},
      paramsDoMains:{
        domains:[
        {
          value:'',
          children:[
            {
              childValue:'',
              value:''
            },
            {
              childValue:'',
              value:''
            }
          ]
        },
        {
          value:'',
          children:[
            {
              childValue:'',
              value:''
            }
          ]
        }
      ]
      }
    }
  },
  components:{
    PubSearchHead,
    PubTree
  },
  mounted(){
    this.http(1)
    //模糊查询
    this.$bus.$on("onSearch",search=>{

    })
    this.$bus.$on("onAddDialog",flag=>{
      this.dialogParamsVisible=flag;
    })
    
  },
  methods:{
    http(page){
      api.selectItemParamAll({
        page
    }).then(res=>{
      if(res.data.status===200){
        this.tableData=res.data.result
      }
    }).catch(err=>{
      console.log(err);
    })
    },
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      getTreeData(data){
        this.treeData=data
      },
      addParamsHandle(){
        this.dialogParamsAddVisible=true
      },
      /* 添加规格参数主结构 */
      addMainParamsHandle(){
        this.paramsDoMains.domains.push({
          value:'',
          children:[
            {
              childValue:'',
              value:''
            }
          ]
        })
      },
      /* 删除主结构 */
      delMainParamsHandle(index){
        this.paramsDoMains.domains.splice(index,1)
      },
      /* 添加子结构 */
      addChildParamsHandle(index){
        this.paramsDoMains.domains[index].children.push({
              childValue:'',
              value:''
            })
      },
      /* 删除子结构 */
      delChildParamsHandle(index,childIndex){
        this.paramsDoMains.domains[index].children.splice(childIndex,1)
      },
      /* 添加规格参数完整信息 */
      finishAddParamsHandle(){
        console.log(this.treeData);
        console.log(this.paramsDoMains.domains);
        api.insertItemParam({
          itemCatId:this.treeData.cid,
          content:JSON.stringify(this.paramsDoMains.domains)
        }).then(res=>{
          if(res.data.status===200){
            this.dialogParamsAddVisible=false;
            this.dialogParamsVisible=false;
            this.http(1)
          }
        }).catch(err=>{
          console.log(err);
        })
      },
      handleParamsDelete(index,row){
        api.deleteParams({
          id:row.id
        }).then(res=>{
          if(res.data.status===200){
            this.http(1)
          }
        }).catch(err=>{
          console.log(err);
        })
      }
  }
}
</script>

<style>

</style>